<template>
	<view class="sim-part">
		<view v-for="(item,index) in listData" :key="item.id" class="sim-list">
			<!-- 纯文字 -->
			<block v-if="type == 'text'">
				<view class="sim-list_title" :style="{fontSize:titleSize}">{{ item.title}}</view>
				<view class="sim-list_subTitle" v-if="item.subtitleSize" :style="{fontSize:subtitleSize}">
					{{ item.subTitle}}
				</view>
				<view class="sim-list_description" v-if="item.description" :style="{fontSize:desSize}">
					{{ item.description }}
				</view>
			</block>
			<!-- 左右图文 + 大标题 -->
			<block v-else-if="type == 'leftImage'||type == 'rightImage'">

				<view class="sim-list-imgPart" :class="{'imgPartRight': type == 'rightImage'}" @tap="goToPage(item.id)">
					<image :src="item.image" />
					<view class="sim-list_text">
						<view class="sim-list_title simTitle" v-if="item.title" :style="{fontSize:titleSize}">
							{{ item.title}}
						</view>
						<view class="sim-list_subTitle simSubTitle" v-if="item.subTitle"
							:style="{fontSize:subtitleSize}">
							{{ item.subTitle }}
						</view>
						<view class="sim-list_description simTime" v-if="item.time" :style="{fontSize:timeSize}">
							{{ item.time }}
						</view> 
					</view>
				</view>
			</block>
			<!-- 大图 + 主、副标题 -->
			<block v-else-if="type == 'bigImage'">
				<image class="sim-list_bigImg" :src="item.image" />
				<view class="sim-list_title" :style="{fontSize:titleSize}">{{item.title}}</view>
				<view class="sim-list_description simDescriptionColor" v-if="item.description"
					:style="{fontSize:desSize}">{{ item.description }}</view>
			</block>

			<slot name="bottom" :item="item"></slot>
		</view>
	</view>
</template>

<script>
	/**
	 * 新闻列表
	 * @description 纯文字、主副标题模式
	 * @params {string} type 展示的类型: text:纯文字, leftImage:左图右文，rightImage:左文右图   
	 * @params {array} listData[]{title:string;content:string;subTitle:string;description:string;image:string} 展示的list数据
	 * @params {string} titleSize 标题，字号带单位
	 * @params {string} subtitleSize 副标题，字号带单位
	 * @params {string} desSize 描述，字号带单位
	 * 
	 */
	export default {
		props: {
			type: {
				type: String,
				default: 'text',
			},
			listData: {
				type: Array,
				default: [],
			},
			titleSize: {
				type: String,
				default: '40rpx'
			},
			subtitleSize: {
				type: String,
				default: '26rpx'
			},
			timeSize: {
				type: String,
				default: '26rpx'
			},
			desSize: {
				type: String,
				default: '26rpx'
			}
		},
		data() {
			return {};
		},
		methods: {
			goToPage(id) {
				// 触发一个自定义事件，例如'gotoDetail'  
				this.$emit('gotoDetail',id);  
			}
		},
	};
</script>

<style lang="scss" scoped>
	.sim-list {
		background: #fff;
		border-bottom: 1px solid #eee;
		padding: 28rpx;
		line-height: 1.3;

		&>view:not(:last-child),
		&_bigImg {
			margin-top: 18rpx;
		}

		.simTitle {
			height: 50rpx;
			overflow: hidden;
			margin-bottom: 10rpx;
		}

		.simSubTitle {
			height: 80rpx;
			overflow: hidden;
			line-height: 1.5;
		}

		.simTime {
			text-align: right;
		}

		.simDescription {
			height: 80rpx;
			overflow: hidden;
			line-height: 1.5;
		}

		.simDescriptionColor {
			color: #ff0000;
		}

		// &_subTitle{
		//     margin-top: 18rpx;
		// }
		&_description {
			color: #999;
			// margin-top: 18rpx;
		}

		&_bigImg {
			width: 100%;
			height: 260rpx;
			object-fit: contain;
			border-radius: 10rpx;
			// margin-top: 18rpx;
		}

		&-imgPart {
			display: flex;

			&.imgPartRight {
				flex-direction: row-reverse;

				.sim-list_text {
					padding-left: 0;
					padding-right: 20rpx;

				}
			}

			image {
				width: 200rpx;
				height: 200rpx;
				object-fit: contain;
			}

			.sim-list_text {
				width: calc(100% - 200rpx);
				padding-left: 20rpx;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}
</style>